<template>
    <section>
        <el-card class="box-card" style="max-width:1000px; padding:20px 50px 50px; margin:30px auto 50px;">
            <el-col align="right">
                <div class="section">
                    <el-button type="info" disabled>已提交</el-button>
                    <el-button type="primary" plain @click="cancel">返回</el-button>
                </div>
            </el-col>

            <el-col class="records-view">
                <div class="section">
                    <div class="head-item">
                        <div class="head-val">高校名称</div>
                        <div class="head-title">{{recordsData.check_unit_name}}</div>
                    </div>
                    <div class="head-item">
                        <div class="head-val">专家</div>
                        <div class="head-title">{{recordsData.check_user_name}}</div>
                    </div>
                    <div class="head-item">
                        <div class="head-val">不合格检查项数量</div>
                        <div class="head-title">{{recordsData.check_desc_unqualified_count}}</div>
                      <!--  <div class="head-val" style="margin-left: 20px">
                            <span class="cyc cyc-margin cyc-green">&nbsp;</span>
                            <span>{{recordsData.status_2_count}}</span>
                        </div>
                        <div class="head-val">
                            <span class="cyc cyc-margin cyc-orange">&nbsp;</span>
                            <span>{{recordsData.status_1_count}}</span>
                        </div>
                        <div class="head-val">
                            <span class="cyc cyc-margin cyc-red">&nbsp;</span>
                            <span>{{recordsData.status_0_count}}</span>
                        </div>-->
                    </div>
                </div>
            </el-col>


            <el-col>
                <div class="body-item">
                    <div class="body-title">综合意见</div>
                    <div style="margin-top:10px;"></div>
                    <el-input
                            :autosize="true"
                            type="textarea"
                            resize="none"
                            class="showTextConter"
                            v-model="recordsData.suggestion == '' ? '未填写' : recordsData.suggestion "
                            readonly>
                    </el-input>
                </div>
            </el-col>

            <el-col>
                <div class="body-item">
                    <div class="body-title">检查项</div>
                    <div v-for="item in recordsData.check_desc_list" class="body-inspect">
                        <div class="inspect-title">
                            <!--<span :class="'cyc cyc-' + formatCyc(item.check_content_status)"></span>-->
                            <!--<span class="star">{{formatStar(item.star_level)}}</span>-->
                            <span>{{item.check_item_three_order_number + '.&nbsp;' + item.check_item_three }}</span>
                        </div>
                        <div class="inspect-info">
                            <div class="info-title">图片</div>
                            <div class="info-img">
                                <img v-for="img in item.image_list" @click="showImg(img.path)" :src="fixUrl(img.path)"/>
                            </div>
                        </div>
                        <div class="inspect-info">
                            <div class="info-title">楼宇 - 房间号</div>
                            <div style="margin-top:-5px;">
                                <el-tag  v-for="(lab, index) in item.building_room" :key="index" class="info-item" type="success" style="margin-right:15px;">{{lab.building}}</el-tag>
                            </div>
                        </div>
                        <div class="inspect-info">
                            <div class="info-title">描述信息</div>
                            <el-input
                                    :autosize="true"
                                    style="display: block;"
                                    type="textarea"
                                    v-model="item.desc"
                                    resize="none"
                                    class="showTextConter"
                                    readonly>
                            </el-input>
                        </div>
                    </div>

                </div>
            </el-col>
        </el-card>

        <!--对话框-显示大图-->
        <el-dialog title="显示大图" :visible.sync="big_img_dialog.show">
            <img class="big-img" :src="big_img_dialog.path">
        </el-dialog>
    </section>
</template>

<script>
    import * as api from '../../api/records_api'
    import dict from '../../common/js/dict';
    import {getResourceUrl} from '../../api/common';

    export default {
        data() {
            return {
                loading: false,
                big_img_dialog: {
                    show: false,
                    path: ''
                },
                resource_url: '',
                //表格数据
                recordsData: {
                    id: '',
                    check_unit_name: '',
                    check_unit_logo: '',
                    check_user_name: '',
                    check_desc_count: 0, // 检查项数量
                    check_desc_unqualified_count: 0, // 不合格数量
                    status_1_count: 0, // 待改进
                    status_2_count: 0, // 有亮点
                    status_0_count: 0, // 不合格
                    check_status: '', // 检查作业状态 0-未提交；1-已提交；2-打回
                    gmt_modified: '', // 更新时间
                    suggestion: '',
                    check_desc_list: []
                }
            }
        },
        methods: {
            showImg(path) {
                this.big_img_dialog.path = this.fixUrl(path);
                this.big_img_dialog.show = true;
            },
            cancel() {
                // this.$router.push('/records/list');
                 this.$router.go(-1)
            },

            formatCyc(status) {

                switch (status.toString()) {
                    case '0':
                        return 'red';
                    case '2':
                        return 'green';
                    case '1':
                    default:
                        return 'orange';
                }
            },
            formatStar(cnt) {
                switch (cnt) {
                    case '1':
                        return '★';
                    case '2':
                        return '★★';
                    case '3':
                        return '★★★';
                    case '0':
                    default:
                        return '';
                }
            },
            fixUrl(url) {
                if (url && url.length > 0 && url.toLowerCase().indexOf("http:") != 0) {
                    return this.resource_url + url;
                }
                return url;
            },
            //初始化页面
            initData() {
                if (this.resource_url.length == 0) {
                    getResourceUrl().then((res) => {
                        if (res.data.status == 200) {
                            this.resource_url = res.data.datas;
                        } else {
                        }
                    });
                }

                let params = {
                    id: this.$route.params.id
                };

                api.getRecordsDetail(params).then((res) => {
                    if (res.data.status == 200) {
                        let data = JSON.parse(res.data.datas);
                        if (data) {
                            data.check_desc_count = 0;
                            data.status_2_count = 0;
                            data.status_1_count = 0;
                            data.status_0_count = 0;

                            if (data.check_desc_list && data.check_desc_list.length > 0) {
                                for (let i = 0; i < data.check_desc_list.length; i++) {
                                    let status = data.check_desc_list[i].check_content_status;
                                    data.check_desc_count++;
                                    switch (status) {
                                        case "0":
                                            data.status_0_count++;
                                            break;
                                        case "1":
                                            data.status_1_count++;
                                            break;
                                        case "2":
                                            data.status_2_count++;
                                            break;
                                        default:
                                            break;
                                    }
                                }
                            }

                        }
                        this.recordsData = data.edit

                        // this.recordsData.check_desc_list = data.data[0].check_desc_list
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.status + " " + res.data.msg);
                    }
                });

            }
        },
        mounted() {
            this.$nextTick(function () {
                this.initData();
            })
        }
    }
</script>
<style>
    .grid-conter .records-view{
        color:#666;
    }
</style>
<style scoped>
    .head-item {
        margin-bottom: 15px;
        text-align: left;
    }

    .head-title {
        display: inline-block;
        text-align: right;
        margin-right: 10px;
        font-weight: bold;
    }

    .head-val {
        display: inline-block;
        color: #666;
        width: 130px;
        line-height:10px
    }

    .section {
        margin-top: 15px;
        padding-bottom: 15px;
        border-bottom: solid 1px #eceaea;
    }

    .cyc {
        border-radius: 5px;
        width: 10px;
        height: 10px;
        display: inline-block;
        display: -webkit-inline-box;
    }

    .cyc-margin {
        margin: 0 5px 0 10px;
    }

    .cyc-green {
        background-color: #7ED321;
    }

    .cyc-orange {
        background-color: #F5A623;
    }

    .cyc-red {
        background-color: #D0021B;

    }

    .body-item {
        margin-top: 25px;
    }

    .body-title {
        font-weight: bold;
        line-height:22px;
    }

    .body-val {
        margin-top: 10px;
        border: solid 1px #eceaea;
        padding: 10px;
        min-height: 50px;
    }

    .body-inspect {
        margin-top: 20px;
        border: solid 1px #eceaea;
        padding: 15px 30px 0;
    }

    .inspect-title {
        font-size:16px;
        padding-bottom:10px;
    }

    .star {
        margin: 0 3px;
    }

    .inspect-info {
        margin-bottom:35px;
    }

    .info-title {
        margin-bottom: 15px;
        font-weight: bold;
        line-height:18px;
    }

    .info-img{
        line-height:0;
    }
    .info-img img {
        cursor:pointer;
        height: 75px;
        width: 75px;
        margin-right: 15px;
        display: inline-block;
    }
    .big-img{
        max-width: 100%;
    }
</style>
